part of _;

extension on ProductDetailPage {
  Widget view_topBar() {
    return Container(
      width: yScreenSize().width,
      height: yStatubarHeight() + yNavBarHeight(),
      decoration: BoxDecoration(image: DecorationImage(image: AssetImage(YConfig.navBar), fit: BoxFit.fill)),
      child: Padding(
        padding: EdgeInsets.only(top: yStatubarHeight()),
        child: Row(
          children: [
            YButton(width: yNavBarHeight(), height: yNavBarHeight(), child: Icon(Icons.arrow_back_ios), onTap: () => yFinish()),
            Expanded(
              child: GestureDetector(
                onTap: () => yIntent(SearchPage(), intentType: YIntentType.Present),
                child: Container(
                  padding: EdgeInsets.only(left: 10, right: 10),
                  margin: EdgeInsets.only(top: 5, bottom: 5),
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(99), border: Border.all(color: YConfig.themeColor, width: 1.5), color: Colors.white),
                  alignment: Alignment.centerLeft,
                  child: Text("请输入搜索内容...", style: TextStyle(color: Colors.grey)),
                ),
              ),
            ),
            yIsWeb ? SizedBox(width: 10) : YButton(width: yNavBarHeight(), height: yNavBarHeight(), child: Icon(Icons.more_horiz), onTap: () => controller_showMore()),
          ],
        ),
      ),
    );
  }

  Widget view_banner() {
    return Container(
      width: yScreenSize().width,
      height: yScreenSize().width,
      color: Colors.black,
      child: Stack(
        children: [
          PageView.builder(
            physics: ClampingScrollPhysics(),
            controller: pageController,
            onPageChanged: (value) {
              chewieController?.pause();
              setState(() => page_assets = value);
            },
            itemCount: model!.items_assets.length,
            itemBuilder: (context, index) {
              final item = model!.items_assets[index];
              Widget view_image() {
                return GestureDetector(
                  child: YImage(null, null, item.img, fit: BoxFit.cover),
                  onTap: () => yIntent(ShowPicturePage(pictures: model!.items_assets.map((e) => e.img).toList(), index: index)),
                );
              }

              Widget view_video() {
                return Container(
                  width: yScreenSize().width,
                  height: yScreenSize().height,
                  color: Colors.black,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      isPlaying
                          ? Container(
                              width: yScreenSize().width,
                              color: Colors.black,
                              child: Chewie(controller: chewieController!),
                            )
                          : YEmpty(),
                      isPlaying ? YEmpty() : YImage(yScreenSize().width, yScreenSize().height, YOSS.ossVideo2Image(item.video), fit: BoxFit.cover),
                      isPlaying ? YEmpty() : CircularProgressIndicator(),
                    ],
                  ),
                );
              }

              if (index == 0) {
                return item.video.isEmpty ? view_image() : view_video();
              } else {
                return view_image();
              }
            },
          ),
          Positioned(
            right: 5,
            bottom: 5,
            child: Container(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              decoration: BoxDecoration(color: Colors.black.withAlpha(100), borderRadius: BorderRadius.circular(99)),
              child: Text("${page_assets + 1}/${model!.items_assets.length}", style: TextStyle(color: Colors.white, fontSize: 12)),
            ),
          ),
        ],
      ),
    );
  }

  Widget view_bottom() {
    Widget view_item(String title, String image, onTap(), {bool isLoading = false, int badge = 0}) {
      return Stack(
        children: [
          YButton(
            enable: !isLoading,
            onTap: onTap,
            width: 50,
            height: 50,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                isLoading ? Padding(padding: EdgeInsets.all(1), child: YCircularProgress(size: 20, strokeWidth: 2)) : Image.asset(image, height: 22),
                YSpacer(height: 2),
                Text(title, style: TextStyle(fontSize: 12)),
              ],
            ),
          ),
          badge > 0
              ? Positioned(
                  top: 1,
                  right: 0,
                  child: MyViews.view_badge(badge),
                )
              : YEmpty(),
        ],
      );
    }

    return Container(
      color: Colors.white,
      child: Row(
        children: [
          view_item("客服", "images/icon_kefu.png", () => yIntent(ChatPage(serviceName: model!.serviceName, serviceAvatar: model!.serviceAvatar, serviceID: model!.serviceID))),
          view_item("购物车", "images/icon_gouwuche.png", () => yIntent(CartPage(isSinglePage: true)), badge: model!.count_carts),
          view_item("收藏", model!.isSave ? "images/icon_shoucang_select.png" : "images/icon_shoucang_unselect.png", () => controller_save(), isLoading: isSaveLoading),
          Expanded(
            child: Container(
              height: 50,
              padding: EdgeInsets.all(5),
              child: Row(
                children: [
                  Expanded(
                    child: YButton(
                      height: 40,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [Color.fromARGB(255, 242, 202, 70), Color.fromARGB(255, 239, 151, 56)],
                        ),
                      ),
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(20), bottomLeft: Radius.circular(20)),
                      padding: EdgeInsets.only(left: 5),
                      child: Text("加入购物车", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                      onTap: () => controller_showSelectSku(),
                    ),
                  ),
                  Expanded(
                    child: YButton(
                      height: 40,
                      decoration: BoxDecoration(gradient: IFinal.Colors.btnThemeGradient),
                      borderRadius: BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(20)),
                      padding: EdgeInsets.only(right: 5),
                      child: Text("立即购买", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                      onTap: () => controller_showSelectSku(),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget view_info() {
    return Card(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      color: Colors.white,
      child: Container(
        padding: EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text("￥", style: TextStyle(color: YConfig.themeColor, fontSize: 14)),
                Expanded(child: Text(model!.money, style: TextStyle(color: YConfig.themeColor, fontSize: 20, fontWeight: FontWeight.bold))),
                Text("销量:${model!.count_sales}", style: TextStyle(fontSize: 12, color: Colors.grey)),
              ],
            ),
            YSpacer(height: 5),
            Divider(height: 1),
            YSpacer(height: 10),
            Text(model!.title, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
          ],
        ),
      ),
    );
  }

  Widget view_select() {
    Widget view_type() {
      return YButton(
        isInk: true,
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("选择", style: TextStyle(color: Colors.grey, fontSize: 14)),
            YSpacer(width: 10),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("商品规格", style: TextStyle(color: Colors.black, fontSize: 14)),
                  YSpacer(height: 10),
                  Row(
                    children: [
                      Container(
                        height: 35,
                        child: ListView.builder(
                          padding: EdgeInsets.zero,
                          scrollDirection: Axis.horizontal,
                          primary: false,
                          shrinkWrap: true,
                          itemCount: model!.items_sku.length > 4 ? 4 : model!.items_sku.length,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: EdgeInsets.only(right: 5),
                              child: YImageCorner(35, 35, model!.items_sku[index].img, 3, fit: BoxFit.cover),
                            );
                          },
                        ),
                      ),
                      Container(
                        height: 35,
                        alignment: Alignment.center,
                        padding: EdgeInsets.only(left: 10, right: 10),
                        decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(3)),
                        child: Text("共${model!.items_sku.length}种规格可选", style: TextStyle(color: Colors.grey, fontSize: 12)),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Icon(Icons.chevron_right_rounded, color: Colors.grey),
          ],
        ),
        onTap: () => controller_showSelectSku(),
      );
    }

    Widget view_param() {
      return YButton(
        isInk: true,
        padding: EdgeInsets.all(10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("参数", style: TextStyle(color: Colors.grey, fontSize: 14)),
            YSpacer(width: 10),
            Expanded(child: Text("${model!.items_param.first.title}...", style: TextStyle(color: Colors.black, fontSize: 14))),
            Icon(Icons.chevron_right_rounded, color: Colors.grey),
          ],
        ),
        onTap: () => controller_showParam(),
      );
    }

    return Card(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          view_type(),
          Divider(height: 1, indent: 45),
          view_param(),
        ],
      ),
    );
  }

  Widget view_reply() {
    return Card(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      color: Colors.white,
      child: YButton(
        isInk: true,
        padding: EdgeInsets.all(10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(child: Text("商品评价(${model!.count_replys})", style: TextStyle(color: Colors.black, fontSize: 14))),
            Text("查看全部", style: TextStyle(color: YConfig.themeColor, fontSize: 12)),
            Icon(Icons.chevron_right_rounded, color: YConfig.themeColor),
          ],
        ),
        onTap: () {
          yToast("商品评价");
        },
      ),
    );
  }

  Widget view_detail() {
    return Column(
      children: [
        YSpacer(height: 15),
        Text("---- 商品详情 ----", style: TextStyle(color: Colors.grey, fontSize: 12)),
        YSpacer(height: 15),
        ListView.builder(
          padding: EdgeInsets.zero,
          primary: false,
          shrinkWrap: true,
          itemCount: model!.items_detail.length,
          itemBuilder: (context, index) => YImage(yScreenSize().width, null, model!.items_detail[index]),
        ),
      ],
    );
  }
}
